<template>
  <div catchtouchmove='true'>
    <div class="popup-mask" :style="{'top': styleTop+'px'}"></div>
     <div class="popup-sort" :style="{'top': styleTop+'px'}">
       <ul>
         <radio-group class="radio-group" @change="radioChange">
          <li  v-for="(item,index) in data" :key="index">
            <label class="radio">
              <radio :value="index" :checked="index == selectSortIndex"/>
              {{item.name}}
            </label>
          </li>
        </radio-group>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["data","selectSortIndex",'styleTop'],
    data() {
      return {}
    },
    methods: {
      radioChange(e) {
        this.selectSortIndex = e.target.value;
        let selectSorter = this.data[this.selectSortIndex]
        this.$emit('receiveSorter', selectSorter)
      },
      showOrHide() {
        this.$emit('popupSorter')
      }
    }
  };
</script>

<style scoped>
  .popup-mask {
    top: 44px
  }

  .popup-sort {
    position: fixed;
    top: 44px;
    width: 100%;
    z-index: 9999;
    background: #fff
  }

  .popup-sort ul li {
    line-height: 46px;
    padding: 0 3%;
    border-top: 1px #eeeeee solid
  }

  .popup-sort ul li label {
    display: block
  }

  .popup-sort ul li label span {
    float: right;
    margin-top: 10px
  }

  .popup-sort ul li:active, .popup-sort ul li.on {
    background: #fbfbfb
  }
</style>
